<template>
	<div id="app">
		<!--  头部的盒子 -->
		<header>
			<h1>税收收入数据可视化</h1>
			<div class="showTime">{{gettime}}</div>
		</header>
		<section class="mainbox">
			<div class="column">
				<div class="panel bar">
					<h2>柱形图-分行业税收收入情况<a @click="ndqhEvent(2019)">2019</a>
						<a @click="ndqhEvent(2020)"> 2020</a>
					</h2>
					<Barchart1 :message="ndtext" class="chart"></Barchart1>
					<div class="panel-footer"></div>
				</div>
				<div class="panel line">
					<h2>折线图-最近12个月的收入趋势</h2>
					<Linechart1 class="chart"></Linechart1>
					<div class="panel-footer"></div>
				</div>
				<div class="panel pie">
					<h2>饼形图-地方库款余额</h2>
					<Piechart1 class="chart"></Piechart1>
					<div class="panel-footer"></div>
				</div>
			</div>
			<div class="column">
				<!-- 中间模块 -->
				<div class="no">
					<div class="no-hd">
						<ul>
							<li>18,279.80</li>
							<li>68</li>
						</ul>
					</div>
					<div class="no-bd">
						<ul>
							<li>全国税收累计（亿元）</li>
							<li>比上年同期（%）</li>
						</ul>
					</div>
				</div>
				<div class="map">
					<div class="map1"></div>
					<div class="map2"></div>
					<div class="map3"></div>
					<Mapchart class="chart"></Mapchart>
				</div>
			</div>
			<div class="column">
				<div class="panel bar1">
					<h2>柱状图-分税种税收收入情况</h2>
					<Barchart2 class="chart"></Barchart2>
					<div class="panel-footer"></div>
				</div>
				<div class="panel line1">
					<h2>折线图-地方一般公共预算收入趋势</h2>
					<Linechart2 class="chart"></Linechart2>
					<div class="panel-footer"></div>
				</div>
				<div class="panel pie1">
					<h2>饼形图-分地区税收收入情况</h2>
					<Piechart2 class="chart"></Piechart2>
					<div class="panel-footer"></div>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
	import Mapchart from './components/mapchart.vue'
	import Barchart1 from './components/barchart1.vue'
	import Linechart1 from './components/linechart1.vue'
	import Piechart1 from './components/piechart1.vue'
	import Barchart2 from './components/barchart2.vue'
	import Linechart2 from './components/linechart2.vue'
	import Piechart2 from './components/piechart2.vue'

	export default {
		name: 'App',
		data() {
			return {
				ndtext: "",
				timeoutstr: null,
				gettime: ''
			}
		},
		components: {
			Mapchart,
			Barchart1,
			Linechart1,
			Piechart1,
			Barchart2,
			Linechart2,
			Piechart2,
		},
		created() {
			if (this.timeoutstr != null) {
				clearInterval(this.timeoutstr);
			}
			this.timeoutstr = setInterval(this.getTimestr, 1000);
		},
		destroyed() {
			clearInterval(this.timeoutstr);
		},
		methods: {
			ndqhEvent(text) {
				//alert(text);
				this.ndtext = text;
			},
			getTimestr() {
				let dt = new Date();
				let y = dt.getFullYear();
				let mt = dt.getMonth() + 1;
				let day = dt.getDate();
				let h = dt.getHours(); //获取时
				let m = dt.getMinutes(); //获取分
				let s = dt.getSeconds(); //获取秒
				this.gettime = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" +
					s + "秒";
			}
		}
	}
</script>

<style lang="less" scoped>
</style>
